<template>
  <span
    class="dic-value-box"
    :style="{'color': dicColor.color, 'background-color': dicColor.bgColor}"
  >{{ dicValue }}</span>
</template>

<script setup>
import {ref, watch, onBeforeMount} from 'vue';
import {useDictionaryStore} from '@/pinia/modules/dictionary';

const props = defineProps({
  modelValue: String | Number,
  dicCode: String,
  dicColors: Array
});

const dictionaryStore = useDictionaryStore();
const dicValue = ref('');
const dicColor = ref({});

const init = async(data) => {
  let dicKey = data.modelValue + '';
  if (data.dicCode && dicKey) {
    dicValue.value = await dictionaryStore.getDicValue(data.dicCode, dicKey);
    dicColor.value = (props.dicColors || []).find(item => item.key === dicKey) || {};
  } else {
    dicValue.value = '';
  }
};

watch(() => props, (data) => {
  init(data);
}, {deep: true});

onBeforeMount(() => {
  init(props);
});
</script>

<style scoped>
.dic-value-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 8px;
  min-width: 50px;
  align-items: center;
  border-radius: 5px;
}
</style>